<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="bootstrap/css/bootstrap.min.css">
		<script src="js/jquery-3.4.1.js"></script>
		<style>
			img{
				width: 150px;
				height: 150px;
			}
			tr{
				width: 85%;
				text-align: center;
			}
			td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>
			<input type="text" id="search-txt">
			<input type="button" value="搜索" id="search-btn">
			<input type="button" value="新增" id="new">
		</div>
		<form>
			<table id="tbl">
				<tr>
					<td>图片</td>
					<td>学号</td>
					<td>姓名</td>
					<td>性别</td>
					<td>班级</td>
					<td>院系</td>
					<td>宿舍</td>
					<td>电话</td>
					<td>操作</td>
				</tr>
			</table>
		</form>
		<div id="page">

		</div>
		<script>
			var objs;
			var totalrecords;//总记录数
			var pageSize=5;//初始页面大小显示五条数据
			var currentPage;//当前界面初始为1
			var maxPage;//尾页
			function pageInit(){
				console.log("aaa");
				console.log(objs);
				totalrecords=objs.length;
				console.log("totalrecords"+totalrecords);
				maxPage=parseInt(totalrecords%pageSize==0?totalrecords/pageSize:totalrecords/pageSize+1);
				console.log("maxPage"+maxPage);
				currentPage=1;
				showRecords();
			}
			function setCurrentPage(n) {
				if (n>=maxPage){
					currentPage=maxPage;
				}else if (n<=1){
					currentPage=1;
				}else{
					currentPage=n;
				}
				showRecords()
			}
			function showRecords(){
				var div=$("#page")
				div.empty();//移除分页标签
				if(currentPage!=1) {
					div.append("<button onclick='setCurrentPage(1)'>首页</button>");
					div.append("<button onclick='setCurrentPage(currentPage-1)'>上一页</button>");
				}
				if(currentPage!=maxPage){
					div.append("<button onclick='setCurrentPage(currentPage+1)'>下一页</button>");
					div.append("<button onclick='setCurrentPage(maxPage)'>尾页</button>");
				}
				var p=$("<p style='display: inline'>跳转到</p>");
				var select=$("<select id='select-page'>跳转到</select>");
				select.append("<option value='0'>请选择</option>")
				for(var i=1;i<=maxPage;i++){
					if(i!=currentPage){
						select.append("<option value='"+i+"'>"+i+"</option>");
					}
				}
				p.append(select);
				div.append(p);
				var bt_page=$("<input type='button' value='确定'>");
				bt_page.click(function () {
					setCurrentPage($("#select-page").val());
				})
				div.append(bt_page);

				$(".add").remove();//先移除
				for(index=pageSize*(currentPage-1);index<pageSize*currentPage;index++){
					var tr=$("<tr class='add'></tr>");
					if(objs[index]["gender"]=="女"){
						tr.append("<img src='img/girl.jpeg'>");
					}else{
						tr.append("<img src='img/boy.jpg'>");
					}
					tr.append("<td>"+objs[index].stuNo+"</td>");
					tr.append("<td>"+objs[index].stuName+"</td>");
					tr.append("<td>"+objs[index].gender+"</td>");
					tr.append("<td>"+objs[index].classes+"</td>");
					tr.append("<td>"+objs[index].department+"</td>");
					tr.append("<td>"+objs[index].dormNo+"</td>");
					tr.append("<td>"+objs[index].tel+"</td>");
					var bt_delete=$("<input type='button' name='delete' value='删除'>");
					bt_delete.on("click",function () {
						$.ajax({
							type: "get",
							url: "/studentDemo/DeleteStudentByNoServlet",
							data: {"stuNo": objs[index].stuNo},
							async: false,
							success:function (response) {
								var data=JSON.parse(response);
								switch (data.result) {
									case "ok":
										alert(data.msg);
										window.location.href="listStudents.html";
										break;
									case "error":
										alert(data.msg);
										break;
									default:
										alert("出错啦!");
										break;
								}
							}
						});
					});
					var bt_update=$("<input type='button' name='update' value='修改'>");
					bt_update.on("click",function () {
						window.location.href="updateStudent.html?stuNo="+objs[index].stuNo;
					});
					var td=$("<td></td>");
					td.append(bt_delete);
					td.append(bt_update);
					tr.append(td);
					$("#tbl").append(tr);
				}
			}
			$("#new").click(function () {
				window.location.href="newStudent.html";
			})
			$("#search-btn").click(function () {
				var searchTxt=$("#search-txt").val();
				$(".add").remove();
				if(searchTxt==""){
					$.ajax({
						type:"get",
						url:"/studentDemo/ListStudentsServlet",
						async:false,
						success:function (response) {
							objs=JSON.parse(response);
							pageInit();
						}
					});
				}else{
					$.ajax({
						type:"get",
						url:"/studentDemo/ListStudentByStrServlet",
						data:{"str":searchTxt},
						async:false,
						success:function (response) {
							objs=JSON.parse(response);
							pageInit();
						}
					});
				}
			});
			$(function(){
				$.ajax({
					type:"get",
					url:"/studentDemo/ListStudentsServlet",
					async:false,
					success:function (response) {
						objs=JSON.parse(response);
						pageInit();
					}
				});
			});
		</script>
	</body>
	
</html>
